<template>
    <div>
       <div header>
          <div class="tite">
            <div class="one"><span class="iconfont caidan">&#xe66d;</span></div>
            <router-link to="/mymusic"><div class="two"><span class="iconfont yingyue">&#xe680;</span></div></router-link>
            <router-link to="/"><div class="three"><span class="iconfont tuijian">&#xe620;</span></div></router-link>
            <router-link to="search"><div class="four"><span class="iconfont soshuo">&#xe632;</span></div></router-link>
          </div>
        <div class="xinxi">
            15
        </div>
       </div>
        <router-view></router-view>
        <div class="foot">
            <div class="foot-one">
                <img src="../common/img/01.jpg" class="foot-img"/>
            </div>
            <div class="foot-two">
                  <div class="foot-two-one">八十年代的歌</div>
                  <div class="foot-two-two">横划可以切换上下首哦</div>
            </div>
            <div class="foot-four"><span class="iconfont bf-caidan">&#xe655;</span></div>
            <div class="foot-three"><span class="iconfont bo-fang">&#xe610;</span></div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'index'
}
</script>

<style lang='stylus' scoped>
 .tite
  overflow hidden
  width 100%
  height .8rem
  background-color red
  div
   float left
   line-height .8rem
   text-align center
   span
    font-size .5rem
    color #fff
    opacity 0.5
  .four
    float right
    margin-right .15rem
  .two
   margin-left 2rem
   margin-right 1.2rem
 .xinxi
  position absolute
  top .05rem
  left .2rem
  background-color #ffffff
  border-radius .15rem
  width .4rem
  height .35rem
  color red
  line-height .35rem
  text-align center
.foot
 width 100%
 height 1rem
 background-color #ffffff
 position absolute
 left 0rem
 bottom 0rem
 right 0rem
 .foot-one
  width 1rem
  box-sizing border-box
  height 100%
  padding .1rem
  background-color #ffffff
  float left
  .foot-img
   width 100%
   height 100%
   border-radius .1rem
 .foot-two
  float left
  height 100%
  display flex
  flex-direction column
  justify-content center
  .foot-two-one
   font-size .28rem
   margin-left .1rem
  .foot-two-two
   font-size .23rem
   margin-top .2rem
   margin-left .1rem
 .foot-three
   float right
   line-height 1rem
   .bo-fang
    color #333
    line-height 1rem
    font-size .5rem
    margin-right .2rem
 .foot-four
   float right
   line-height 1rem
   .bf-caidan
    font-size .5rem
    color #333
</style>
